<template>
  <el-form
    ref="ruleFormRef"
    :model="form"
    :rules="rules"
    label-width="auto"
    style="max-width: 100%"
  >
    <el-form-item>
      <el-button type="danger" @click="submitForm(ruleFormRef)"
        >+ 新增</el-button
      >
      <el-button type="danger" disabled>保存</el-button>
      <el-button type="danger" disabled>撤销</el-button>
      <el-button type="danger" disabled>删除</el-button>
    </el-form-item>
    <hr />
    <br />
    <div style="font-size: 20px; font-weight: bolder">基本信息</div>
    <hr />
    <br />
    <el-form-item label="称重日期：" prop="weighingDate">
      <el-date-picker
        v-model="form.weighingDate"
        type="date"
        placeholder="请选择称重日期"
        style="width: 180px"
      />
    </el-form-item>
    <el-form-item label="猪只耳号：" prop="earNumber">
      <el-select
        v-model="form.earNumber"
        placeholder="请选择猪只耳号"
        style="width: 180px"
      >
        <el-option
          v-for="item in getbasic"
          :key="item"
          :label="item.earNumber"
          :value="item.earNumber"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="称重类型：" prop="weighingTypeId">
      <el-select
        v-model="form.weighingTypeId"
        placeholder="请选择称重类型"
        style="width: 180px"
      >
        <el-option
          v-for="item in weighingType"
          :key="item"
          :label="item.weighingName"
          :value="item.weighingTypeId"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="重量(公斤)：" prop="pigWeight">
      <el-input
        v-model="form.pigWeight"
        placeholder="请输入重量(公斤)"
        style="width: 180px"
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { useRouter, useRoute } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();
const route = useRoute();
// do not use same name with ref
const form = reactive({
  "pigsWeighingId": 0,
  "weighingDate": "",
  "weighingTypeId": 0,
  "earNumber": "",
  "pigWeight": 0
});

//称重类型
const weighingType = ref([]);
const getWeighingType = () => {
  axios
    .post(apiBedinUrl+"/api/PigWeighings/SearchWeighingType", {})
    .then((res) => {
      console.log("品种", res.data.data);
      weighingType.value = res.data.data;
    });
};
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  earNumber: [{ required: true, message: "请选择耳号", trigger: "change" }],
  weighingDate: [{ required: true, message: "请选择称重日期", trigger: "change" }],
  weighingTypeId: [{ required: true, message: "请选择称重类型", trigger: "change" }],
  pigWeight: [{ required: true, message: "请输入重量（公斤）", trigger: "blur" }],
});
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(form);
      axios
        .post(apiBedinUrl+"/api/PigWeighings/AddPigsWeighing", form)
        .then((res) => {
          console.log("猪只称重", res.data);
          if (res.data.code == 0) {
            ElMessage.success("添加成功");
          } else {
            ElMessage.error("添加失败");
          }
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
//显示
const getbasic = ref([]);
const getData = () => {
  axios.post(apiBedinUrl+"/api/Basics/SearchBasic", {}).then((res) => {
    console.log("耳号显示", res.data);
    getbasic.value = res.data.data;
  });
};
//生命周期钩子
onMounted(() => {
  getWeighingType();
  getData();
});
</script>

<style scoped></style>
